<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
/* 为div直接包含的 span设置一个字体颜色
    子元素选择器
       -作用：选中指定父元素的指定子元素
       语法：父元素>子元素
*/
div.box>span{
  color: red;
}

/* 后代元素选择器
     作用：选中指定元素内的指定后代元素
     语法：祖先 后代
 */
div span{
  color: blue;
}

/*  选择下一个兄弟
       语法：前一个+下一个(只对紧挨着的下一个标签有效)
    选择下边所有的兄弟
       语法：兄~弟（对挨着以后所有标签都有效）
    */
  p + span{
    color: green;
  }
p ~span{
  color: blueviolet;
}

/*  */
</style>
</head>
<body>
    <!-- 
        父元素
          --直接包含子元素的元素是父元素
        子元素
          --直接背父元素包含的元素是子元素
        祖先元素
          --直接或间接包含后代的元素是祖先元素
          --一个元素的父元素也是它的祖先元素
        后代元素
          --直接或间接被祖先元素包含的元素叫后代元素
        兄弟元素
          --拥有相同父元素的元素是兄弟元素


     -->
    <div class="box">
     div元素
     <p>
         div中的p元素
        <span> p元素中的sapn</span>
     </p>
<span> div中的span</span>
    </div>

    <div>
      <span>
        第二个div的span
      </span>
    </div>
</body>
</html>